<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        .tabale .col-sm-1 {
            width: 14.2%;
            padding: 20px 0;
            text-align: center;
        }

        .gray {
            background-color: #54BFAF;
            font-size: 16px;
            color: #fff;
        }

        .ibox-content {
            padding-bottom: 0;
        }

        strong {
            color: #009999;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-content tabale fff" style="border:none;border-bottom:1px solid #ccc">
                        <div class="row">
                            <div class="col-sm-1 gray">集群</div>
                            <div class="col-sm-1 gray">宿主机</div>
                            <div class="col-sm-1 gray">虚拟机</div>
                            <div class="col-sm-1 gray">CPU</div>
                            <div class="col-sm-1 gray">内存</div>
                            <div class="col-sm-1 gray">存储</div>
                            <div class="col-sm-1 gray">可回收虚拟机</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-1"><strong>10</strong></div>
                            <div class="col-sm-1"><strong>30</strong></div>
                            <div class="col-sm-1"><strong>50</strong></div>
                            <div class="col-sm-1">
                                <p>
                                    <span>已用：<strong>100</strong> 核</span>
                                    <span>可用：<strong>100</strong> 核</span>
                                </p>
                            </div>
                            <div class="col-sm-1">
                                <p>
                                    <span>已用：<strong>100</strong> 核</span>
                                    <span>可用：<strong>100</strong> 核</span>
                                </p>
                            </div>
                            <div class="col-sm-1">
                                <p>
                                    <span>已用：<strong>100</strong> 核</span>
                                    <span>可用：<strong>100</strong> 核</span>
                                </p>
                            </div>
                            <div class="col-sm-1">
                                <strong>10台</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>利用趋势</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6 bdr">
                                <div class="echarts" id="echarts-line"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="echarts" id="echarts-line2"></div>
                            </div>
                            <div class="col-sm-6 bdr">
                                <div class="echarts" id="echarts-line3"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="echarts" id="echarts-line4"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <script type="text/javascript">
        $(function () {







            // 折线图1
            var lineChart = echarts.init(document.getElementById("echarts-line"));

            lineoption = {
                title: {
                    text: 'CPU容量利用率趋势',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10%',
                    data: ['严重', '主要', '次要', '警告']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '严重',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '主要',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '次要',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '警告',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
                ]
            };


            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);



            // 折线图2
            var lineChart = echarts.init(document.getElementById("echarts-line2"));

            lineoption = {
                title: {
                    text: '内存容量利用率趋势',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10%',
                    data: ['严重', '主要', '次要', '警告']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '严重',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '主要',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '次要',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '警告',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
                ]
            };


            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);

            // 折线图3
            var lineChart = echarts.init(document.getElementById("echarts-line3"));

            lineoption = {
                title: {
                    text: '磁盘空间容量利用率趋势',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10%',
                    data: ['严重', '主要', '次要', '警告']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '严重',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '主要',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '次要',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '警告',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
                ]
            };


            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);

            // 折线图4
            var lineChart = echarts.init(document.getElementById("echarts-line4"));

            lineoption = {
                title: {
                    text: '容量预测视图',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10%',
                    data: ['严重', '主要', '次要', '警告']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '严重',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '主要',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '次要',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '警告',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
                ]
            };


            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);






        })
    </script>
</body>

</html>